<template lang="">
  <div class="nav-header">
    <!-- 左侧折叠菜单和面包屑 -->
    <div class="left">
      <!-- 折叠按钮 -->
      <i
        class="fold"
        :class="isFold ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
        @click="handleFoldClick"
      ></i>
      <!-- 面包屑 -->
      <my-breadcrumb :breadcrumbs="breadcrumbs" />
    </div>
    <!-- 右侧图标和头像 -->
    <div class="right">
      <!-- 消息，收藏，铃铛 -->
      <div class="icons">
        <i class="el-icon-chat-dot-square"></i>
        <i class="el-icon-collection-tag"></i>
        <i class="el-icon-bell"></i>
      </div>
      <!-- 右侧头像区域 -->
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar
            src="https://z3.ax1x.com/2021/10/31/IpnclR.jpg"
            class="el-avatar"
          ></el-avatar>
          {{name}}
        </span>
        <!-- 头像展开菜单 -->
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="el-icon-user" class="el-dropdown-item">个人信息</el-dropdown-item>
            <el-dropdown-item icon="el-icon-more-outline" divided>其他信息</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-close">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref,computed, reactive } from '@vue/reactivity'
import { useStore } from 'vuex'
import MyBreadcrumb from '@/base-ui/breadcrumb'
import { pathMapToBreadcrumb } from '@/utils/map-menus'
import { useRoute } from 'vue-router'
const store = useStore()
const route = useRoute()
// 注册自定义事件
const emit = defineEmits(['handleFold'])

const name = computed(()=>store.state.login.userInfo.name)
const isFold = ref(false)
// 每次点击折叠按钮后都将按钮取反，然后触发折叠事件
const handleFoldClick = () => {
  isFold.value = !isFold.value
  emit('handleFold', isFold.value)
}
// 通过pathMapToBreadcrumb方法执行返回当前路由的name和当前路由的父路由的name
// 通过computed可以在任何依赖的数据变更后再次重新执行方法获取name，以免出现点击面包屑不变的情况
const breadcrumbs = computed(()=> pathMapToBreadcrumb(store.state.login.userMenu,route.path)
)

</script>
<style scoped lang="less">
.nav-header {
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  .left {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 15px;
    .fold {
      font-size: 30px;
      &:hover {
        cursor: pointer;
      }
    }
  }
  .right{
    display: flex;
    align-items: center;
    // flex:1
    .el-dropdown-link{
      display: flex;
      align-items: center;
      gap: 12px;
      .el-avatar{
        height: 40px;
        width: 40px;
        display: flex;
        justify-content: center;
      }
    }
    .el-dropdown-link:hover{
      cursor: pointer;
    }
    .icons{
      display: flex;
      gap: 18px;
      margin-right: 20px;
      i{
        font-size: 20px;
      }
      i:hover{
        color: #3498db;
        cursor: pointer;
      }
    }
  }
}
</style>
